<!--作者:于大明-->
<template>
	<view class="dj-video-body">
		<view class="widget-video">
			<swiper :current="_videoIndex" style="height: 100vh;" class="swiper video-item-box" :circular="circular"
				:vertical="true" @change="onSwiperChange">
				<swiper-item v-for="(item,index) in videoList" :key="item.id">
					<video :muted="false" class="fullscreen-video" :id="item.id" :ref="item.id" :src="item.videoUrl"
						:poster="item.viedeoCollectionPosterUrl" :loop="false" :controls="false"
						:show-fullscreen-btn="false" @error="error" :show-center-play-btn="false" object-fit="cover"
						@ended="videoEnd" @click="pauseVideo" preload="auto" :show-play-btn="false"></video>
					<!-- @timeupdate="currentStatus='play'" -->
					<!-- -->
					<!--  -->

					<i @click="pauseVideo"
						:class="['iconfont iconbofang btn-play',currentStatus == 'pause' && _videoIndex == index ? 'show' : '']"></i>

					<view class="video-title" @tap.stop="openVideo">
						<view class="user-name">{{item.videoItem.viedeoCollectionName}}(第{{_videoDataIndex+1}}集)</view>
						<view class="video-content">
							<uni-icons style="position: relative;top:8rpx" type="videocam-filled" size="20"
								color="white"></uni-icons>
							<text>《{{item.videoItem.viedeoCollectionName}}》更新至{{videoDataList.length}}集|选集></text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 看剧弹窗 -->
		<uni-popup ref="viedoPopup" background-color="#fff" @maskClick="$util.wxCanMove(false)">
			<view>
				<uni-section :title="`1-${videoDataList.length}集`" type="line" padding>
					<template v-slot:right>
						<view class="d-flex">
							<button class="mr-1" type="warn" size="mini" @tap="openDj">热门短剧</button>
							<button type="primary" class="mr-1" size="mini" @tap="openOrder">订单</button>
							<button type="default" size="mini"
								@tap="$cw.addWx('https://pic.cwyyt.cn/upload/20231006/1428132813_2023100611827.png')">客服</button>
						</view>
					</template>

					<view class="content_list">
						<scroll-view scroll-y="true">
							<view class="example-body">
								<view class="tag-view" v-for="(item,index) in videoDataList" :key="index" @tap="onSwiperChange({
										detail:{
											current:1,
											realIndex:index
										}
									})">
									<uni-tag v-if="item.videoUrl" :inverted="index!=_videoDataIndex"
										:text="`第${index+1}集`" type="primary" />
									<uni-tag v-else :text="`第${index+1}集`" />
								</view>
							</view>
						</scroll-view>
					</view>
				</uni-section>
			</view>
		</uni-popup>

		<!-- 订单弹窗 -->
		<uni-popup ref="orderPopup" background-color="#fff" @maskClick="$util.wxCanMove(false)">
			<uni-section title="微信订单" type="line">
				<view class="content_list">
					<scroll-view scroll-y="true">
						<uni-list>
							<order-item v-for="(item,index) in orderDatas" :inputItem="item" :key="index"></order-item>
						</uni-list>
						<view v-if="orderDatas.length==0" class="text-center">暂无数据...</view>
					</scroll-view>
				</view>
			</uni-section>
		</uni-popup>

		<!-- 热门短剧 -->
		<uni-popup ref="djPopup" background-color="#fff" @maskClick="$util.wxCanMove(false)">
			<uni-section title="其他热门短剧推荐" type="line">
				<template v-slot:right>
					<view class="d-flex">
						<button class="mr-1" type="warn" size="mini"
							@tap="$util.wxCanMove(false);$refs.djPopup.close()">关闭</button>
					</view>
				</template>

				<view class="content_list" style="background-color: rgb(241, 241, 241);">
					<uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="输入编号或名称搜索"
						@clear="searchText=''" />
					<scroll-view scroll-y="true">
						<uni-list>
							<video-item v-for="(item,index) in calDjDatas" :inputItem="item" :key="index"></video-item>
						</uni-list>
					</scroll-view>
				</view>
			</uni-section>
		</uni-popup>


		<!-- 支付弹窗 -->
		<uni-popup ref="buyPopup" background-color="#fff" @maskClick="orderPopupMaskClick">
			<view>
				<uni-section title="微信支付" type="line" padding>
					<!-- <template v-slot:right>
						<view class="d-flex">
							<button class="mr-1" type="warn" size="mini" @tap="openDj">看其他热门短剧</button>
						</view>
					</template> -->

					<view class="d-flex justify-between">
						<text>感谢您支持作者,购买后可继续观看</text>
					</view>

					<!-- <view class="text-red text-bold">注:只能按照顺序依次解锁!</view> -->
					<uni-grid :column="2" :square="false" :highlight="true" @change="buyProduct"
						style="margin-top: 5rpx;">
						<uni-grid-item v-for="(item, index) in buyProducts" :index="index" :key="index">
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons type="weixin" :size="30" color="#777" />
								<!-- <rich-text :nodes="item.text"></rich-text> -->
								<text class="text" v-html="item.text"></text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>
		</uni-popup>

	<!-- 	<uni-popup ref="adPopup" background-color="#fff" :is-mask-click="false">
			<view style="width: 550rpx;text-align: center;" class="p-5">
					<view style="right: 6rpx;top:-16rpx" class="position-absolute">
						<uni-icons type="closeempty" size="25" color="#636363" @tap="$util.wxCanMove(false);$refs.adPopup.close()"></uni-icons>
					</view>
					<view>
						<view style="color: #f08763;" class="font-30">恭喜你,获得免费观剧名额</view>
						<wx-open-launch-weapp class="opentag" env-version="release" extra-data="hello" username="gh_5447134f2e70" :path="spPath" @launch="spLaunch" @error="spError">
						    <view v-is="'script'" type='text/wxtag-template'>
						         <view style="height: 400rpx;width:100ww">
									 <view style="background-color: #ed764b;color: white;line-height:2;display: inline-block;margin-top:20rpx;margin-left:12rpx;padding:30rpx;border-radius:10rpx">看视频免费观看本集</view>
								 </view>
						    </view>
						</wx-open-launch-weapp>
					</view>
			</view>
		</uni-popup> -->

		<!-- 	<y-video-slide ref="yVideoSlide" video-height="100vh" :data="videoDatas" @paySuccess="_onPaySuccess" >
		</y-video-slide> -->
	</view>
</template>

<script src="./dj-video-body.js"></script>

<style lang="less" scoped>
	@import url('dj-video-body.less');
</style>